<template>
	<view class="editAddress">
		<view class="header">
			<view class="info">
					<view class="item">
						<text>姓名</text>
						<input class="uni-input"  type="text" maxlength="6" v-model="name" placeholder='请填写收货人姓名' placeholder-style="color:#cccccc">
					</view>
					<view class="item">
						<text>手机号</text>
						<input class="uni-input"  type="number" maxlength="11" v-model="mobile" placeholder='请填写收货人手机号码' placeholder-style="color:#cccccc">
					</view>
					
					<view class="item selectAddr" @click="selectAddr">
							<text>所在地区</text>
							<view class="right">
									<text>{{pickerText}}</text>
									<view class="icon">
										<uni-icon type="arrowright" size="20" color="#cccccc"></uni-icon>
									</view>
							</view>
							
						
					</view>
				
				<view class="item lastItem">
						<text>详细地址</text>
						<textarea  v-model="addrDeatil"  placeholder="请填写详细地址，不少于4字" maxlength="50" placeholder-style="color:#cccccc;lineHeight:1.8" placeholder-class="phStyle"/>
					</view>
				
				
				
			</view>
			
			
			<!-- <radio-group class="radio-group" @change="radioChange"> -->
				<label class="radio">
					<radio :checked="isdefault" color="#FF1268" @click="clickRadio"/>设为默认地址
				</label>
			<!-- </radio-group> -->
			
			
		</view>
			
		<view class="footer">
			<view class="addAddr_btn" @click="addAddr">保存</view>
		</view>
		
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
import { cityData, cityUtil } from '../../common/cityData.js';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            mobile: '',
            name: '',
            pickerText: '',
            addrDeatil: '',
            areaId: 0,
            cityPickerValueDefault: [0, 0, 1],
            themeColor: '#007AFF',
            isdefault: false,
            id: 0
        };
    },
    onLoad(e) {
        this.id = parseInt(e.id);

        // console.log(this.id);
        if (e.id > 0) {
            //             this.cityPickerValueDefault = [10, 0, 0];
            //             uni.setNavigationBarTitle({
            //                 title: '编辑地址'
            //             });
            uni.showLoading({
                title: '加载中...'
            });
            util.ajax(
                'userAddressDetail',
                {
                    targetId: this.id,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        // console.log(json);
                        this.name = json.data.name;
                        this.addrDeatil = json.data.detail;
                        this.mobile = json.data.mobile;
                        this.isdefault = json.data.def;
                        this.areaId = json.data.areaId;
                        this.pickerText = cityUtil.getAreaById(this.areaId);
                        // this.pickerText = json.data.areaId;
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        } else {
            // 			uni.setNavigationBarTitle({
            // 				title: '编辑地址'
            // 			});
        }
    },
    onNavigationBarButtonTap(e) {
        if (this.id > 0) {
            uni.showModal({
                // title: '确认删除该地址吗？',
                content: '确认删除该地址吗',
                cancelText: '删除',
                cancelColor: '#cccccc',
                confirmText: '再看看',
                confirmColor: '#fff',
                success: res => {
                    if (res.confirm) {
                    } else if (res.cancel) {
                        this.addressDel();
                    }
                },
                fail: () => {},
                complete: () => {}
            });
        }
    },
    methods: {
        radioChange(e) {
            // console.log(e);
        },
//         setDef() {
//             util.ajax(
//                 'userAddressDef',
//                 {
//                     targetId: this.id,
//                     token: util.getUserToken()
//                 },
//                 data => {
//                     uni.hideLoading();
//                     let json = data.data;
//                     if (json.status) {
//                     } else {
//                         uni.showToast({
//                             title: json.message,
//                             icon: 'none',
//                             duration: 1000
//                         });
//                     }
//                 },
//                 (data, code) => {
//                     // console.log(data);
//                     uni.showToast({
//                         title: JSON.stringify(data.message),
//                         icon: 'none',
//                         duration: 1000
//                     });
//                 }
//             );
//         },
        addressDel() {
            util.ajax(
                'userAddressDel',
                {
                    targetId: this.id,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 500);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        clickRadio() {
            this.isdefault = !this.isdefault;
        },
        onCancel(e) {
            // console.log(e);
        },
        addAddr() {
					// console.log(this.isdefault)
            // console.log(this.name);
            if (!this.name) {
                uni.showToast({
                    title: '姓名不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.pickerText) {
                uni.showToast({
                    title: '请选择地区',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.addrDeatil) {
                uni.showToast({
                    title: '地址不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }

            uni.showLoading({
                title: '提交中...'
            });
            util.ajax(
                'userAddressEdit',
                {
                    addressId: this.id,
                    name: this.name,
                    mobile: this.mobile,
                    areaId: this.areaId,
                    detail: this.addrDeatil,
                    def: this.isdefault,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 500);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        selectAddr() {
            this.$refs.mpvueCityPicker.show();
        },
        onConfirm(e) {
            // console.log(e);
            this.areaId = e.cityCode;
            // this.cityPickerValueDefault = e.value;
            this.pickerText = e.label;
        },
        del(index) {
            uni.showModal({
                // title: '确认删除该地址吗？',
                content: '确认删除该地址吗',
                cancelText: '删除',
                cancelColor: '#cccccc',
                confirmText: '再看看',
                confirmColor: '#fff',
                success: res => {
                    if (res.confirm) {
                    } else if (res.cancel) {
                        this.list.splice(index, 1);
                    }
                },
                fail: () => {},
                complete: () => {}
            });
        }
    },
    components: {
        uniIcon,
        mpvueCityPicker
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';
@import '../../common/uni.css';
.phStyle{
	line-height: 1.8 !important;
}
.editAddress {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
	font-size: 30upx;
	color:#333333;
    .header {
        flex-direction: column;
        .radio {
            padding: 20upx 30upx;
            box-sizing: border-box;
        }
        .info {
            flex-direction: column;
            background: white;
            padding: 0 30upx;
            box-sizing: border-box;

            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 100upx;
                align-items: center;
                text:first-child {
                  width: 22%;
                  font-size: 30upx;
                  color:#333333;
                }

                .uni-input {
                    padding-left: 0;
					font-size: 30upx;
					color:#333333;
                }
            }
			.item:last-child{
				border-bottom: none;
			}
            .selectAddr {
                .right {
                    width: 78%;
                    justify-content: space-between;
                    align-items: center;
                    text {
                        width: 90%;
                    }
                }
            }
            .lastItem {
                height: 160upx;
                align-items: flex-start;
                padding: 20upx 0;
				text{
					// border: 1upx solid red;
					line-height: 1.8;
				}
                textarea {
					padding-left: 18upx;
                    font-size: 30upx;
                    height: 160upx;
                    line-height: 1.8;
					// border: 1upx solid red;
                }
            }
        }
    }
    .footer {
        padding: 10upx 30upx 0;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        .addAddr_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 100upx auto 0;
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
    }
}
</style>
